<!DOCTYPE html>
<html>
    <head>
        <title>Itowns - collada</title>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" type="text/css" href="css/example.css">
        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">

        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
    </head>
    <body>
        <div id="viewerDiv"></div>

        <!-- Import iTowns source code -->
        <script src="../dist/itowns.js"></script>
        <script src="../dist/debug.js"></script>

        <!-- Import iTowns LoadingScreen and GuiTools plugins -->
        <script src="js/GUI/GuiTools.js"></script>
        <script src="js/GUI/LoadingScreen.js"></script>

        <script type="importmap">
            {
                "imports": {
                    "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
                    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
                }
            }
        </script>

        <script type="module">
            // Warning: For now, three is imported twice: in the itowns bundle
            // and from the unpkg CDN.
            import * as THREE from 'three';
            import { ColladaLoader } from 'three/addons/loaders/ColladaLoader.js';

            // ---------- CREATE A GlobeView FOR SUPPORTING DATA VISUALIZATION : ----------

            // Define camera initial position
            const placement = {
                coord: new itowns.Coordinates('EPSG:4326', 4.21655, 44.84415),
                range: 500,
                heading: 180,
                tilt: 60,
            };

            // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
            const viewerDiv = document.getElementById('viewerDiv');

            // Create a GlobeView
            const view = new itowns.GlobeView(viewerDiv, placement);

            // Setup loading screen and debug menu
            setupLoadingScreen(viewerDiv, view);
            const debugMenu = new GuiTools('menuDiv', view);



            // ---------- DISPLAY CONTEXTUAL DATA : ----------

            // Display ortho-images
            itowns.Fetcher.json('./layers/JSONLayers/Ortho.json')
                .then(function _(config) {
                    config.source = new itowns.WMTSSource(config.source);
                    view.addLayer(
                        new itowns.ColorLayer('Ortho', config),
                    ).then(debugMenu.addLayerGUI.bind(debugMenu));
                });

            // Display elevation data
            function addElevationLayerFromConfig(config) {
                config.source = new itowns.WMTSSource(config.source);
                view.addLayer(
                    new itowns.ElevationLayer(config.id, config),
                ).then(debugMenu.addLayerGUI.bind(debugMenu));
            }
            itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json')
                .then(addElevationLayerFromConfig);
            itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json')
                .then(addElevationLayerFromConfig);




            // ---------- DISPLAY COLLADA DATA : ----------

            const url = 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/models/collada/building.dae';

            const loader = new ColladaLoader();
            loader.load(url, function (collada) {
                const model = collada.scene;

                // building coordinate
                const coord = new itowns.Coordinates(
                    'EPSG:4326', 4.2165, 44.844, 1417,
                );

                model.position.copy(coord.as(view.referenceCrs));
                // align up vector with geodesic normal
                model.lookAt(model.position.clone().add(coord.geodesicNormal));
                // user rotate building to align with ortho image
                model.rotateZ(-Math.PI * 0.2);
                model.scale.set(1.2, 1.2, 1.2);

                // update coordinate of the mesh
                model.updateMatrixWorld();

                view.scene.add(model);
                view.notifyChange();
            });


            // Warning: the following code is not part of this example, those
            // variables are only exposed for internal functional test uses.
            window.view = view;

        </script>
    </body>
</html>
